<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--bootstrap插件-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
	<!--字体插件-->
	<link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
	<link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
	<!--ztree-->
	<link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
	<!--common-->
	<link href="/static/css/common.css" rel="stylesheet"/>
	<!--帮助手册样式-->
	<link rel="stylesheet" type="text/css" href="/static/css/help/document.css">
	<!--代码高亮-->
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shCoreDefault.css"/>
	<link type="text/css" rel="stylesheet" href="/static/plugin/SyntaxHighlighter/styles/shThemeDefault.css"/>
	<title>无标题文档</title>
<script>

</script>
</head>

<body style="padding:5px 10px; box-sizing:border-box; background-color:white;">
<a href="#" target="_blank" class="showAtTop">显示单页</a>
<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>&nbsp;&nbsp;&nbsp;&nbsp;下拉列表
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<p><b>JoSelect</b></p>
			<p><err>使用jo.formatUI()对页面内的组件统一进行格式化，格式化发生在页面加载完成之前（调用写在页面底部）,平台在common.js末尾默认调用!</err></p>
		</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2"><i class="fa fa-caret-down"> </i>属性</td>
	</tr>
	<tr>
		<td><attr><string/>data</attr></td>
		<td>下拉列表数据<br/>示例: <code>data="[{key:'bj',value:'北京'},{key:'ty',value:'太原'}]"</code></td>
	</tr>
	<tr>
		<td><attr><string/>dataUrl</attr></td>
		<td>数据的请求地址<br/>示例: <code>dataUrl="http://www.rookie.com:8088/joUI/temp/xxx.action"</code></td>
	</tr>
	<tr>
		<td><attr><string/>keyField</attr></td>
		<td>作为key值的字段</td>
	</tr>
	<tr>
		<td><attr><string/>valueField</attr></td>
		<td>作为文本显示的字段</td>
	</tr>
	<tr>
		<td><attr><string/>firstItem</attr></td>
		<td>第一条显示的数据，例如希望第一条显示“请选择”, <code>firstItem='{"key":"","value":"请选择"}'</code>
		<br/><err>要使用json字符串格式</err></td>
	</tr>
	<tr>
		<td><attr><string/>async</attr></td>
		<td>异步标识,默认为false(同步),当页面含有多个joSelect组件时,可以通过设置异步加载来优化页面渲染速度</td>
	</tr>
</table>

<table class="docTable">
	<tr class="docTitle">
		<td colspan="2">
			<i class="fa fa-caret-down"> </i>方法
		</td>
	</tr>
	<tr>
		<td><func><void/>init()</func></td>
		<td>初始化下拉列表组件</td>
	</tr>
	<tr>
		<td><func><void/>load(oData)</func></td>
		<td>加载数据,参数为对象数组</td>
	</tr>
	<tr>
		<td><func><void/>setValue(val)</func></td>
		<td>设置值,如果调用此方法时组件还没有装载完毕,则会等到装载结束后进行赋值</td>
	</tr>
	<tr>
		<td><func><void/>clear()</func></td>
		<td>清除,将元素之设为空,下拉选项归为默认项</td>
	</tr>
	<tr>
		<td><func><void/>(eventName, callback)</func></td>
		<td>注册事件,支持同一事件多个回调,按照注册顺序触发
			<br/>要注意注册顺序,只有在回调时间点前注册才有效
			<br/>@param eventName 事件名称,loaded:加载完成事件
			<br/>@param callback 事件对应的回调函数
		</td>
	</tr>
</table>

<div class="eg">
	<pre name="code" class="brush:xml;toolbar:false;" style="overflow: auto;">
		&lt;select name="city" class="joSelect" firstItem='{"key":"","value":"请选择"}'
	data="[{key:'bj',value:'北京'},{key:'sh',value:'上海'}]" dataUrl="" keyField="key" valueField="value">&lt;/select>
	</pre>
	<select name="city" class="joSelect" firstItem='{"key":"","value":"请选择"}' 
	data="[{key:'bj',value:'北京'},{key:'sh',value:'上海'}]" dataUrl="" keyField="key" valueField="value"></select>
</div>


<div class="eg">
	<pre name="code" class="brush:xml;toolbar:false;" >
&lt;select name="city" class="joSelect" dataUrl="{URL_CMS}cms/administrativeRegion/getPage" keyField="id" valueField="name" firstItem='{"id":"","name":""}'>&lt;/select>
	</pre>
	<select name="city" class="joSelect" data="" 
		dataUrl="{URL_CMS}cms/administrativeRegion/getPage"
		keyField="id" valueField="name" firstItem='{"id":"","name":""}'>
	</select>
</div>
</body>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>

<!--帮助手册js-->
<script src="/static/js/help/document.js"></script>
<!--代码高亮-->
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shCore.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script class="javascript" src="/static/plugin/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script class="javascript">
	highLight();
</script>
<script type="text/javascript">
//jo.formatUI();//调用格式化组件
</script>
</html>
